<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>后台系统</title>
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<style>
			html,
			body {
				height: 100%;
				margin: 0;
				padding: 0;
			}

			#app {
				display: flex;
				flex-direction: column;
				height: 100%;
			}

			.top-bar {
				width: 99%;
				background: #f5f5f5;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 15px;
			}

			.sidebar-container {
				display: flex;
				flex-grow: 1;
			}

			.sidebar {
				width: 200px;
				background-color: #bfbfbf;
				padding-top: 20px;
				display: flex;
				flex-direction: column;
			}

			.sidebar-item {
				padding: 10px;
				cursor: pointer;
				text-align: center;
				text-decoration: none;
				/* 去除下划线 */
				color: #000;
				/* 修改颜色 */
			}

			.sidebar-item:hover {
				background-color: #e0e0e0;
			}

			.sidebar-item.active {
				background-color: #c0c0c0;
				color: white;
			}

			.main-content {
				flex-grow: 1;
				padding: 10px;
				overflow: hidden;
				/* 隐藏滚动条 */
			}

			.page-container {
				width: 100%;
				height: calc(100vh - 80px);
			}

			.page-iframe {
				width: 100%;
				height: 100%;
				border: none;
			}

			.is-title {
				margin: 0;
				padding: 10px;
			}

			.router-link-active {
				color: #000 !important;
				background: #f0f0f0 !important;
				border-bottom: 1px solid #d9d9d9;
			}
		</style>
	</head>
	<body style="overflow: hidden;">
		<div id="app">
			<div class="top-bar">
				<h3 class="is-title">
					液位仪数据管控中心
				</h3>
				<div>
					<el-button @click="logOut" size="small">登出</el-button>
					<!--   <el-button size="small"  @click="dialogVisible = true">修改密码</el-button> -->
				</div>
			</div>
			<div class="sidebar-container">
				<div class="sidebar">
					<router-link to="/inventory" class="sidebar-item"
						:class="{ active: currentPage === 'inventory' }">库存管控</router-link>
					<router-link to="/oildischarge" class="sidebar-item"
						:class="{ active: currentPage === 'oildischarge' }">卸油管控</router-link>
					<router-link to="/liquidscale" class="sidebar-item"
						:class="{ active: currentPage === 'liquidscale' }" v-if="loginUser == 'admin'">比例设置</router-link>
				</div>
				<div class="main-content">
					<div class="page-container">
						<router-view></router-view>
					</div>
					<!-- <el-dialog
		  title="修改密码"
		  :visible.sync="dialogVisible"
		  width="30%">
		  <el-form :model="form" :rules="rules" ref="form">
			  <el-form-item>
				  
			  </el-form-item>
		  </el-form>
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="dialogVisible = false">取 消</el-button>
		    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
		  </span>
		</el-dialog> -->
				</div>
			</div>
		</div>

		<script src="./js/vue.min.js"></script>
		<script src="./js/element.lib.js"></script>

		<script src="./js/vue.router.js"></script>
		<script src="./js/axios.js"></script>

		<script>
			// 修复路由报错的代码
			const originalPush = VueRouter.prototype.push;
			VueRouter.prototype.push = function push(location) {
				return originalPush.call(this, location).catch(err => err);
			};
			// 创建 Vue Router 实例
			const router = new VueRouter({
				routes: [{
						path: '/inventory',
						component: {
							template: '<iframe src="./inventory/index.html" class="page-iframe"></iframe>'
						}
					},
					{
						path: '/oildischarge',
						component: {
							template: '<iframe src="./oildischarge/index.html" class="page-iframe"></iframe>'
						}
					},
					{
						path: '/liquidscale',
						component: {
							template: '<iframe src="./liquidscale/index.html" class="page-iframe"></iframe>'
						}
					},
				]
			});

			router.beforeEach((to, from, next) => {
				const token = localStorage.getItem('token')
				if (to.name !== 'login' && !token) window.location.href = './login/index.html';
				else next()


			})
			// 创建 Vue 实例
			new Vue({
				el: '#app',
				router,
				data() {
					return {
						currentPage: null,
						dialogVisible: false,
						loginUser: '',
					};
				},
				created() {
					this.loginUser = localStorage.getItem('loginUser')
					// const token = localStorage.getItem('token')
					// if(!token) {
					// 	window.location.href = './login/index.html'
					// }
					// 获取上次记录的页面路径
					const lastPage = localStorage.getItem('currentPage');
					if (lastPage) {
						this.currentPage = lastPage;
					} else {
						this.currentPage = '/inventory'; // 默认显示的页面路径
					}
					// 导航到默认页面
					this.$router.push(this.currentPage);
				},
				mounted() {
				 
				},
				watch: {
					'$route'(to) {
						// 监听路由变化，更新当前页面
						this.currentPage = to.path.replace('/', '');
					},
					currentPage(newPage) {
						// 页面变化时，保存当前页面路径到本地存储
						localStorage.setItem('currentPage', newPage);
					}
				},
				methods: {
					logOut() {
						// 清除本地存储的当前页面路径
						localStorage.removeItem('currentPage');
						localStorage.removeItem('token');
						// 执行登出操作
						window.location.href = './login/index.html';
					}
				}
			});
		</script>

	</body>
</html>